CSS3を使った画像を使わずにできるデザインのHTML化 #1
角丸やシャドウを使ったデザインをHTML化する際、CSS2の時代では背景画像をつかって実現するしかありませんでした。
CSS3を使えば、画像を使わずにこれらのデザインをHTML化できるようになります。今回はBox Shadowプロパティを利用します。
実際に利用する場合はCSS3に対応しているブラウザはまだ限定されているので代替え策を用意しておくか、CSS3が使えなくても許容できる場合にのみ利用しましょう。
CSS3の細かい対応状況はこちらに詳しく載っています。
CSS2で装飾したカレンダーサンプル
まずは、CSS3を使っていないシンプルなカレンダーを用意しました。次の項で実際にCSS3を使い装飾してみます。
HTMLコード
</p> <div id="sampleCalendar"> <div id="sampleCalenderTitle">8月</div> <table id="sampleCalenderDates"> <tbody> <tr> <td><a href="#">1</a></td> <td><a href="#">2</a></td> <td><a href="#">3</a></td> <td><a href="#">4</a></td> <td><a href="#">5</a></td> <td><a href="#">6</a></td> <td><a href="#">7</a></td> </tr> <tr> <td><a href="#">8</a></td> <td><a href="#">9</a></td> <td><a href="#">10</a></td> <td><a href="#">11</a></td> <td><a href="#">12</a></td> <td><a href="#">13</a></td> <td><a href="#">14</a></td> </tr> <tr> <td><a href="#">15</a></td> <td><a href="#">16</a></td> <td><a href="#">17</a></td> <td><a href="#">18</a></td> <td><a href="#">19</a></td> <td><a href="#">20</a></td> <td><a href="#">21</a></td> </tr> <tr> <td><a href="#">22</a></td> <td><a href="#">23</a></td> <td><a href="#">24</a></td> <td><a href="#">25</a></td> <td><a href="#">26</a></td> <td><a href="#">27</a></td> <td><a href="#">28</a></td> </tr> <tr> <td><a href="#">29</a></td> <td><a href="#">30</a></td> <td><a href="#">31</a></td> </tr> </tbody></table> </div> <p>
CSSコード
#sample01 #sampleCalendar { margin : 0 auto; border:1px solid #111; width : 300px; background:#222; } #sample01 #sampleCalendar #sampleCalenderTitle { padding:5px 10px; border-bottom:1px solid #111; color:#eee; text-align: center; font-weight:600; background:#333; } #sample01 #sampleCalendar #sampleCalenderDates { margin:0; border:none; } #sample01 #sampleCalendar #sampleCalenderDates tr td { padding:0; } #sample01 #sampleCalendar #sampleCalenderDates tr td a { display:block; padding:5px; border-top:1px solid #666; border-left:1px solid #666; border-right:1px solid #444; border-bottom:1px solid #444; color:#ddd; font-size:90%; text-align: center; text-decoration:none; background:#555; } #sample01 #sampleCalendar #sampleCalenderDates tr td a:hover { border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #fff; border-bottom:1px solid #fff; color:#333; background:#ddd; }
CSS3で装飾したカレンダーサンプル
このサンプルでは、Background Gradient、Box Shadow、Text Shadow、Border Radiusプロパティを使い装飾しています。
CSS3を使ったコード
#sample02 #sampleCalendar { overflow:hidden; margin : 0 auto; border:1px solid #111; -webkit-border-radius : 3px; -moz-border-radius : 3px; border-radius : 3px; width : 300px; background:#222; -webkit-box-shadow : inset 1px 1px 0px #eee, 1px 1px 0 #fff; -moz-box-shadow : inset 1px 1px 0px #eee, 1px 1px 0 #fff; box-shadow : inset 1px 1px 0px #eee, 1px 1px 0 #fff; } #sample02 #sampleCalendar #sampleCalenderTitle { padding:5px 10px; border-bottom:1px solid #111; color:#eee; text-align: center; text-shadow:-1px -1px 0 #111; font-weight:600; background : #333; background : -moz-linear-gradient(top, #333, #222); background : -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#222)); background : gradient(linear, 0% 0%, 0% 100%, from(#333), to(#222)); } #sample02 #sampleCalendar #sampleCalenderDates { margin:0; border:none; } #sample02 #sampleCalendar #sampleCalenderDates tr td { padding:0; } #sample02 #sampleCalendar #sampleCalenderDates tr td a { display:block; padding:5px; border-top:1px solid #666; border-left:1px solid #666; border-right:1px solid #444; border-bottom:1px solid #444; color:#ddd; font-size:90%; text-align: center; text-decoration:none; text-shadow:-1px -1px 0 #333; background : #555; background : -moz-linear-gradient(top, #555, #666); background : -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#666)); background : gradient(linear, 0% 0%, 0% 100%, from(#555), to(#666)); } #sample02 #sampleCalendar #sampleCalenderDates tr td.current a, #sample02 #sampleCalendar #sampleCalenderDates tr td a:hover { border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #fff; border-bottom:1px solid #fff; color:#333; text-shadow:1px 1px 0 #eee; background : #ddd; background : -moz-linear-gradient(top, #ccc, #ddd); background : -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#ddd)); background : gradient(linear, 0% 0%, 0% 100%, from(#ccc), #ddd)); -webkit-box-shadow : inset 0px 1px 7px #555; -moz-box-shadow : inset 0px 1px 7px #555; box-shadow : inset 0px 1px 7px #555; }
比べてみる
両方を比べてみると、違いがわかりますね。CSS3を使えば、画像を使わずにグラデーションや角丸が実現できます。 グラデーションや角丸はブラウザが対応していなかったとしても致命的な問題にはなりません。工数は増えてしまいますが、対応していないブラウザ用に画像を使ったスタイルを用意しておけば、すべてのブラウザに対応させることもできます。
次回はBackground Gradient、Box Shadow、Text Shadow、Border Radiusの具体的な指定方法について紹介したいと思います。
